import React from 'react';
import style from './style.styl';
import cx from 'classnames';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';

class ConverTable extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'ConverTable';
  }
  submit = (i) => {
    this.props.fetchData && this.props.fetchData(i+1)
  }
  render() {
    const {
      pageNum,
      pageCount,
      data,
    } = this.props.data;
    const {
      disabled,
      width,
    } = this.props;
    const pageBar = [];
    for(var i = 0,length = pageCount;i < length; i ++) {
      pageBar.push(
        <div key={i} onClick={this.submit.bind(this, i)} className={cx({
          [style['bar-item']]: true,
          [style['active']]: i + 1 === +pageNum,
        })}>{i+1}</div>
      );
    }
    return (
      <div className={style['table-area']}>
        <div className={style['table']} style={{width: width || '100%'}}>
          <div className={style['row-header']}>
            {
              React.Children.map(this.props.children, (child, i) => {
                const {
                  header,
                  width,
                } = child.props;
                return (
                  <div key={i} style={width ? {width: `${width}px`}: {}} className={style['cell']}>{header||''}</div>
                );
              })
            }
          </div>
          {
            data && data.length ? 
            data.map((v, i) => (
              <div className={style['row']} key={i}>
                {
                  React.Children.map(this.props.children, (child, t) => React.cloneElement(child, {
                    data: child.props.item ? child.props.item(v) : v,
                    key: t,
                    disabled: disabled ? disabled(v) : false,
                  }))
                }
              </div>
            ))
            : 
            null
          }
        </div>
        {
          !data ? null :
          !data.length ? 
            <div className={style['row-null']} style={{width: width || '100%'}}>{'（暂无数据）'}</div>
          : null
        }
        <div className={style['bar']}>
          {pageBar}
        </div>
      </div>
    );
  }
}

export default ConverTable;
